<template>
  <div class="lunbo-item">
    <div class="aa">
      <el-carousel :interval="4000" trigger type="card" height="450px">
        <el-carousel-item v-for="(item, index) in imgs" :key="index">
          <!-- <h3 class="medium">{{ item }}</h3> -->
          <span>
            <img :src="item" alt="" />
          </span>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 轮播上的字 -->
    <div class="blog-img-title">
      <div class="img-info">
        <!-- 第一排字 -->
        <div class="one-work animate__animated animate__zoomInDown">
          <p>// 好在精选 & 乐在分享 //</p>
        </div>
        <!-- 搜索框 -->
        <div class="two-seacher">
          <div class="seachers">
            <span class="before-img">
              <Svgs style="font-size: 30px" ids="#icon-ziyuan"></Svgs>
            </span>
            <span class="center-input">
              <el-input
                style="width: 415px"
                placeholder="请输入内容"
                v-model="input"
                clearable
              >
              </el-input>
            </span>
            <span class="after-img">
              <button>
                <Svgs style="font-size: 30px" ids="#icon-sousuo"></Svgs>
              </button>
            </span>
          </div>
        </div>
        <!-- 第三排 字体 -->
        <div class="three-work">
            <div class="works">
               <ul>
                   <li>热门搜索:</li>
                   <li><a href="">Mybatis</a></li>
                   <li><a href="">spring</a></li>
                   <li><a href="">springboot</a></li>
               </ul>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Svgs from "../svg/svg.vue";
export default {
  name: "Rotation",
  components: {
    Svgs,
  },
  data() {
    return {
      input: "",
      imgs: [
        "https://img0.baidu.com/it/u=3253858440,4174423230&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
        "https://img2.baidu.com/it/u=521939595,1130261233&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500",
        "https://img1.baidu.com/it/u=3071602955,913052376&fm=253&fmt=auto&app=138&f=JPEG?w=796&h=500",
        "https://img2.baidu.com/it/u=3896573322,1245897602&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
        "https://img0.baidu.com/it/u=2617075239,2914601110&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500",
        "https://img0.baidu.com/it/u=2312651024,3633751252&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313",
      ],
    };
  },
};
</script>

<style scoped>



.lunbo-item {
  width: 100%;
  min-width: 1904px;
  height: 100%;
  margin-top: 15px;
  position: relative;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

/* 图片处理 */
.lunbo-item .aa span {
  width: 960px;
  height: 450px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  box-shadow: rgb(194 188 188) 17px 24px 37px;
}
.lunbo-item .aa span > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 轮播上的字 */
.blog-img-title {
  width: 50%;
  height: 450px;
  /* background-color: rgba(0, 0, 0, .8); */
  position: absolute;
  top: 0;
  left: 25.05%;
  z-index: 888;
}
.blog-img-title .img-info {
  width: 70%;
  min-width: 666px;
  height: 50%;
  margin: 0 auto;
  margin-top: 112px;
  position: relative;
}
/* 第一排字 */
.blog-img-title .img-info .one-work {
  height: 100px;
  position: absolute;
  top: 40px;
  right: 0; /* 四周拉力相同 */
  bottom: 0; /* 四周拉力相同 */
  left: 0; /* 四周拉力相同 */
}
.blog-img-title .img-info .one-work > p {
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 36px;
  color: #fff;
}
/*第二排搜索  */
.blog-img-title .img-info .two-seacher {
  height: 60px;
  position: absolute;
  top: 90px; /* 四周拉力相同 */
  right: 0; /* 四周拉力相同 */
  bottom: 0; /* 四周拉力相同 */
  left: 0; /* 四周拉力相同 */
}
.blog-img-title .img-info .two-seacher .seachers {
  width: 80%;
  height: 50px;
  background-color: #fff;
  position: absolute;
  top: 30px;
  right: 0; /* 四周拉力相同 */
  bottom: 0; /* 四周拉力相同 */
  left: 0; /* 四周拉力相同 */
  margin: auto;
  border-radius: 24px;
}
.before-img {
  margin-left: 14px;
  line-height: 60px;
}
.center-input {
  position: absolute;
  top: 6px;
  left: 50px;
}

.after-img {
  position: absolute;
  right: 12px;
  top: 10px;
  cursor: pointer;
}

.after-img > button {
  background: #fff;
  border: 0px;
      cursor: pointer;
}

/* 第三排 */
.three-work{
    width: 100%;
    height: 60px;
    position: absolute;
    bottom: -10px;
}
.three-work .works{
    width: 80%;
    height: 100%;
    margin: 0 auto;
}
.works ul{
    display: flex;
    justify-content: center;
}
.works ul>li{
    margin-left: 20px;
    font-size: 18px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
}
.works ul::after{
    content: "";
    display: block;
    clear: both;
}
.works ul>li>a{
    color: #fff;
}
.works ul>li:nth-child(1){
    font-weight: 600;
    color: #fff;
}

</style>